.low-code-container{
	width: 100%;
	height: 100%;
	background-color: #37363c;
	&-preview{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 8;
		overflow: auto;
		padding: 50px;
		box-sizing: border-box;
		&-model{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.3);
		}
		.low-code-container-bottom-work-canvas{
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			box-shadow: 0 0 10px 0 #555;
			transform:scale(1)!important;
			.block{
				position: absolute;
				&::before{
					display: none;
				}
				i{
					display: none;
				}
			}
		}
	}
	&-top{
		width: 100%;
		height: 60px;
		box-shadow: 0 0 10px 0 #222;
		display: flex;
		justify-content: space-between;
		&-left{
			width: 200px;
			height: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			button{
				width: 80px;
				height: 30px;
				border-radius: 5px;
				background-color: var(--main-font-color);
				color: white;
				outline: none;
				line-height: 30px;
				box-shadow: none;
				border: 0;
			}
		}
		&-center{
			width: calc(100% - 500px);
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			button{
				width: 100px;
				height: 30px;
				border-radius: 40px;
				background-color: var(--main-font-color);
				color: white;
				outline: none;
				line-height: 30px;
				box-shadow: none;
				border: 0;
				margin-right: 30px;
			}
		}
		&-right{
			width: 300px;
			height: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			button{
				background-color: transparent;
				color: white;
				border: 0;
			}
		}
	}
	&-bottom{
		width: 100%;
		height: calc(100% - 60px);
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-block{
			width: 200px;
			height: 100%;
			display: flex;
			justify-content: center;
			overflow: auto;
			flex-wrap: wrap;
			padding: 20px 0;
			box-sizing: border-box;
			box-shadow: 0 0 10px 0 #222;
		}
		&-work{
			width: calc(100% - 500px);
			height: 100%;
			position: relative;
			&-scale{
				position: absolute;
				right: 20px;
				top: 5px;
				height: 30px;
				padding: 10px 30px;
				box-sizing: border-box;
				line-height: 8px;
				box-shadow: 0 0 5px 0 #aaa;
				color: white;
				z-index: 8;
			}
			&-container{
				width: 100%;
				height: 100%;
				overflow: auto;
				position: relative;
			}
			&-block{
				position: absolute;
				left: 0;
				top: 0;
			}
			&-canvas{
				position: relative;
				left: 0;
				right: 0;
				margin: auto;
				overflow: auto;
				box-shadow: 0 0 30px 0 #222;
			}
			.block-focus{
				border: 2px dotted var(--main-font-color);
			}
			.line-x{
				position: absolute;
				left: 0;
				right: 0;
				border-top:1px dotted var(--main-font-color);
			}
			.line-y{
				position: absolute;
				top: 0;
				bottom: 0;
				border-left:1px dotted var(--main-font-color);
			}
		}
		&-attribute{
			width: 300px;
			height: 100%;
			box-shadow: 0 0 10px 0 #222;
			overflow-y: auto;
			overflow-x: hidden;
		}
	}
}